<template>
    <div class="Advertisement">
        <!-- 意见列表 -->
        <el-table :data="tableData.slice((admincurrentPage - 1) * adminpage, admincurrentPage * adminpage)"
            style="width: 100%;height: calc(100% - 40px);" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center', background: '#f0f0f5', color: '#606266' }" border>
            <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                    <span>{{ (admincurrentPage - 1) * adminpage + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="邮箱" prop="uEmail">
            </el-table-column>
            <el-table-column label="内容" prop="content">
            </el-table-column>
            <el-table-column label="发送时间" prop="createTime">
            </el-table-column>
            <el-table-column label="回复时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.recoveStatus?scope.row.recoveTime:"" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="回复内容" prop="recoveText">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="!scope.row.recoveStatus" size="mini" @click="handleEdit(scope.$index, scope.row)">回复</el-button>
                    <el-button v-else size="mini" @click="handleLook(scope.$index, scope.row)">查看</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="text-align: center;height: 40px;" background @current-change="adminhandleCurrentChange"
            :current-page.sync="admincurrentPage" layout="prev, pager, next" :page-size="adminpage"
            :total="tableData.length">
        </el-pagination>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="回复内容" prop="recoveText">
                    <el-input v-if="rowMsg" type="text" placeholder="请输入回复内容" v-model="ruleForm.recoveText" maxlength="20"
                        show-word-limit></el-input>
                    <span v-else>{{ruleForm.recoveText}}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-if="rowMsg" @click="SubmitOp">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import apiOp from '@/api/apiOp'
export default {
    name: 'Advertisement',

    data() {
        return {
            tableData: [],
            admincurrentPage: 1,
            adminpage: 10,
            dialogVisible: false,
            dialogTitle: "回复意见",
            ruleForm: {
            },
            rowMsg:0
        };
    },

    mounted() {

    },
    created() {
        this.getAllOp()
    },
    methods: {
        getAllOp() {
            apiOp.getAllOp().then(res => {
                this.tableData = res.data
            })
        },
        getGoodsNameAndId() {
            apiOp.getGoodsNameAndId().then(res => {
                this.options = res.data
            })
        },
        handleLook() {
            this.dialogTitle = "添加意见"
            this.rowMsg = 0
            this.dialogVisible = true
        },
        // 添加意见
        addOp() {
            if (this.rowMsg) {
                apiOp.UpdateOp(this.ruleForm).then(res => {
                    this.dialogVisible = false
                    this.$message.success("修改成功！")
                    setTimeout(() => {
                        this.getAllOp()
                    }, 500)
                })
            } else {
                apiOp.addOp(this.ruleForm).then(res => {
                    this.dialogVisible = false
                    this.$message.success("添加成功！")
                    setTimeout(() => {
                        this.getAllOp()
                    }, 500)
                })
            }
        },
        SubmitOp() {
            if (!this.ruleForm.recoveText) {
                this.$message.warning("请检查输入内容！")
            } else {
                this.addOp()
            }
        },
        handleEdit(index, row) {
            this.dialogTitle = "修改意见"
            this.ruleForm = JSON.parse(JSON.stringify(row))
            this.rowMsg = 1
            this.dialogVisible = true
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                apiOp.deleteOp({ id: row.id }).then(res => {
                    this.$message.success('删除成功')
                    setTimeout(() => {
                        this.getAllOp()
                    }, 500)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        adminhandleCurrentChange(val) {
            this.admincurrentPage = val
        },
        handleClose(done) {
            done()
        },
    },
};
</script>

<style lang="less" scoped>
.Advertisement {
    width: 100%;
    height: 100%;

    .Op_head {
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
}

@media screen and (max-width: 550px) {
    /deep/ .el-dialog {
        width: 90% !important;
    }
}
</style>